<template>
	<view style="padding: 40rpx;background: #fff;">
		<view>
			<!-- <u-tabs :list="list1" @click="click"></u-tabs> -->
			<view class="flex" style="margin-bottom: 40rpx;">
				<view v-for="item in list1" :key="item.name" class="tabIconStyle" @click="click(item)">
					{{ item.name }}
					<image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/activeBot.svg" v-if="item.value == queryData.done"
						class="activeIcon" />
				</view>
			</view>
			<u-input placeholder="请输入关键字" prefixIcon="search"
				prefixIconStyle="font-size: 32px;color: #909399; padding:0 14rpx"
				customStyle="border-radius: 24rpx; height: 60rpx; margin-top: 20rpx" @confirm="onConfirm"></u-input>
		</view>
		<scroll-view @scrolltolower="onUpqQueryData" @refresherrefresh="onUpqQueryData" scroll-y="true" class="flex1"
			style="padding: 30rpx 0;display: flex;align-items:center; flex-direction: column;"
			v-if="onlineStudyList.length">
			<view class="footer-list">
				<view v-if="onlineStudyList.length === 0" class="center" style="width: 100%; height: 100%">
					<u-empty mode="list">
					</u-empty>
				</view>
				<view v-for="(item, index) in onlineStudyList" :key="index" class="footer-list-item"
					@click="onJump(item)" style="margin-bottom: 20rpx;">
					<view class="footer-list-item-img">
						<!-- <image src="/static/images/indeHomePM.png" style="width: 100%; height: 100%"
							class="footer-list-item-img"></image> -->
						<image :src="getImage(index)" style="width: 100%; height: 100%" class="footer-list-item-img">
						</image>
						<view class="footer-list-item-img-text">{{
							onChangeDict(item.status, mapDictCodesData.SysEnableStatus) == '启用' ? '练测中' : '已停用' }}
						</view>
					</view>
					<view class="footer-list-item-title">{{ item.practiceName }}</view>
					<view class="describe-text" style="margin-top: 14rpx">{{ item.planName }}</view>
					<view class="describe-text" style="margin-top: 10rpx;">截止到：{{ item.endTime ? item.endTime : '不限时' }}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { pageBzPractice } from '../../services/IndexService'
import { onDict } from '../../services/ServerService';
import { getArrObjectByProperty, notificationFun } from '../../utils/PrjUtils';
export default {
	data() {
		return {
			list1: [{
				name: '进行中',
				value: false
			}, {
				name: '已结束',
				value: true
			},],
			onlineStudyList: [],
			mapDictCodesData: {},
			queryData: {
				queryType: 2,
				queryKey: '',
				pageNo: 1,
				pageSize: 10,
				done: false
			},
			images: [
				'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A1.png',
				'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A2.png',
				'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A3.png',
				'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A4.png',
				'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A5.png',
				'https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/A6.png'
			]
		}
	},
	onShow() {
		console.log('aaaaaaaaaa');
		
		this.onPageBzPractice();
		this.onMapDictCodes()
	},
	
	watch: {
		queryData: {
			handler(newVal, oldVal) {
				this.onPageBzPractice();
			},
			deep: true // 深度监听
		}
	},
	onReachBottom() {
		console.log('触底');
		this.onUpqQueryData();
	},
	onPullDownRefresh() {
		console.log('下拉刷新触发');
		this.onPageBzPractice();
		this.onMapDictCodes()
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 2000);
	},
	methods: {
		onMapDictCodes() {
			onDict('SysEnableStatus').then(res => {
				this.mapDictCodesData = res
			})
		},
		onChangeDict(val, dict) {
			if (dict) {
				return getArrObjectByProperty(dict, 'value', val)?.text || ''
			}
		},
		onPageBzPractice() {
			console.log(this.queryData, 'this.queryData')
			pageBzPractice(this.queryData).then(
				res => {
					this.onlineStudyList = res.datas
				})
		},

		onUpqQueryData() {
			this.queryData = {
				...this.queryData,
				pageSize: this.queryData.pageSize + 10
			}
		},
		click(item) {
			console.log('item', item);
			this.queryData = {
				...this.queryData,
				done: item.value
			}
		},
		onJump(item) {
			if (item.status === 1) {
				uni.navigateTo({
					url: '/pages/practiceTesting/practicePage?planItem=' + encodeURIComponent(JSON.stringify(item))
				})
			} else {
				notificationFun('当前练测已停用，请联系管理员')
			}

		},
		getImage(index) {
			// 计算图片索引，实现循环
			return this.images[index % this.images.length];
		},
		// 搜索
		onConfirm(value) {
			this.queryData = { ...this.queryData, queryKey: value }
		},
	},
	onBackPress(options) {
		console.log('用户通过手势返回');
		if (options.from === 'navigateBack') {
		}
		return false; // 允许默认返回行为
	},
}
</script>

<style lang="scss">
page {
	background: #fff !important;
}

.footer-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.footer-list-item {
	width: 49%;
	margin-bottom: 40rpx;
}

.footer-list-item-img {
	width: 100%;
	height: 204rpx;
	border-radius: 32rpx;
	position: relative;
	overflow: hidden;
}

.footer-list-item-img-text {
	position: absolute;
	bottom: 0;
	width: 100%;
	color: #fff;
	font-size: 22rpx;
	padding: 10rpx 40rpx;
	background: rgba(0, 0, 0, 0.46);
}

.footer-list-item-title {
	margin-top: 38rpx;
	font-size: 32rpx;
	color: rgba(51, 51, 51, 1);
	font-weight: bold;
}

.tabIconStyle {
	color: #666;
	font-size: 32rpx;
	position: relative;
	margin-right: 46rpx;

	.active {
		font-size: 36rpx;
		font-weight: 500;
	}

	.activeIcon {
		width: 72rpx;
		height: 50rpx;
		position: absolute;
		top: 20rpx;
		left: 16rpx;
	}
}
</style>